<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/app';
import HeaderBanner from './modules/header-banner.vue';
import CardData from './modules/card-data.vue';
import LineChart from './modules/line-chart.vue';
import PieChart from './modules/pie-chart.vue';
import ProjectNews from './modules/project-news.vue';
import CreativityBanner from './modules/creativity-banner.vue';

import ResourceOccupancy from './modules/resource-occupancy.vue';
import SystemInfo from './modules/system-info.vue';
import Notices from './modules/notices.vue';
const appStore = useAppStore();

const gap = computed(() => (appStore.isMobile ? 0 : 16));
</script>

<template>
  <ElSpace direction="vertical" fill class="full-space pb-0" :size="0">
    <HeaderBanner class="mb-16px" />
    <ElRow :gutter="16">
      <ElCol :sm="24" :lg="16">
        <ElRow :gutter="16">
          <ElCol :span="24">
            <CardData></CardData>
          </ElCol>

          <ElCol :span="24">
            <ResourceOccupancy></ResourceOccupancy>
          </ElCol>

          <ElCol :span="24">
            <LineChart></LineChart>
          </ElCol>

          <ElCol :span="24">
            <PieChart></PieChart>
          </ElCol>
        </ElRow>
      </ElCol>
      <ElCol :sm="24" :lg="8">
        <ElRow :gutter="16">
          <ElCol :span="24">
            <SystemInfo></SystemInfo>
          </ElCol>

          <ElCol :span="24">
            <Notices></Notices>
          </ElCol>
        </ElRow>
      </ElCol>
    </ElRow>
  </ElSpace>
</template>

<style scoped lang="scss">
.full-space {
  > :deep(.el-space__item) {
    width: 100%;
  }
}
.el-col{
  margin-bottom: 16px;
}
</style>
